{% extends 'linea/base.html' %}

{% block css-javascript-agregados %}
{% endblock %}

{% block heading_content %}Líneas de Investigación{% endblock %}

{% block content %}

	<span id="filtrar" class="icono-buscar" ></span>
	<center><div id="filtro" class="busqueda-head ui-corner-all ui-state-default">
		<h1>Filtro:</h1>
		<div id="form">
		</div>
	</div></center>
<div id="info_pa_filtrar">
    <br/>
    {% for object in lineasInv %}
    <table style="width: 100%; border-bottom: 1px solid #D3D3D3" >
		<td style="width: 10%;"><a href="/comunidadcyt/lineas/ver/{{ object.id }}"><img  src="{{object.Imagen.url}}" width="70" height="70"/></a></td>
		<td>
			<h6><a href="/comunidadcyt/lineas/ver/{{ object.id }}">{{ object }}</a></h6>
			<p>{{ object.Descripcion_linea}}</p>
		</td>
    </table>
    {% endfor %}
</div>
<script>
    $("#filtro").hide();
    
    $("#filtrar").click(function(){
      $("#filtro").toggle();
    });

	(//un script jquery
		function ($) {
			jQuery.expr[':'].Contains = function(a,i,m){
				return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
			};
			//falta hacer que sea incensible a mayusculas y minusculas
			function filterList(header, list) {
				var form = $("<form>").attr({"class":"filterform","action":"#"}),input = $("<input/>").attr({"class":"filterinput ui-corner-all","type":"text"});
				$(form).append(input).appendTo(header);
				$(input).change( function () {
					var filter = $(this).val(); //obtiene el valor que puse en el input
						if(filter) {
							$matches = $("table:Contains("+filter+")"); //aca selecciono que coincide
							$('table', list).not($matches).slideUp(); //oculto las discrepancias
							$matches.slideDown(); //muestro las concidencias
						} else {
							$(list).find("table").slideDown(); //muestro todo
						}
					return false;
				}).keyup( function () {
					$(this).change();
					});
				}
			$(function () {
					filterList($("#form"), $("#info_pa_filtrar"));	
				});
		}(jQuery)
	);
</script>
{%endblock%}